<template>
  <div class="details">
    <Navi :title="'电影详情'" :flexd="true" />

    <div class="box">
      <div class="nav" :style="{ backgroundColor: movie.backgroundColor }">
        <div class="tbox">
          <div
            class="timg"
            @click="goAdeio(movie.videourl, movie.videoName, movie.pubDate)"
          >
            <img class="auto-img himg" :src="movie.img" alt="" />
            <div class="play">
              <van-icon color="#ddd" size="20" name="play-circle" />
            </div>
          </div>
          <div class="nmbox">
            <div class="nm one-text">{{ movie.nm }}</div>
            <div class="enm one-text">{{ movie.enm }}</div>
            <div class="cat">{{ movie.cat }}</div>
            <div class="desc">{{ movie.pubDesc }}/{{ movie.dur }}分钟</div>
            <div class="btn">
              <div class="like" @click="like()">
                <van-icon name="like-o" /> 想看
              </div>
              <div class="star" @click="star()">
                <van-icon name="star-o" /> 看过
              </div>
            </div>
          </div>
        </div>

        <div class="scbox">
          <div class="tsc">
            <div class="sctitle">
              <div class="scimg">
                <img class="auto-img" src="../assets/icon.png" alt="" />
              </div>
              <div class="sctext">{{ movie.scoreLabel }}</div>
            </div>
            <div class="sum">
              {{ movie.wish }}人想看 {{ movie.watched }}人看过
            </div>
          </div>
          <div class="fbox">
            <div class="fenbox">
              <div class="fen">{{ sc }}</div>
              <div class="fren">{{ movie.snum }}人评</div>
            </div>
            <div class="xbox">
              <div class="xing">
                <div class="xx">
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                </div>

                <div class="xx">
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                </div>

                <div class="xx">
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                </div>

                <div class="xx">
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                </div>

                <div class="xx">
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x1.png" alt="" />
                  </div>
                  <div class="x">
                    <img class="auto-img" src="../assets/x.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="tiao">
                <div
                  class="content"
                  v-for="(item, index) in distributions"
                  :key="index"
                >
                  <van-progress
                    :color="movie.backgroundColor"
                    track-color="#8A8A8A"
                    :percentage="item ? item : '55.67'"
                    :show-pivot="false"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="dra">
          <van-collapse v-model="activeNames">
            <van-collapse-item
              :title-class="'bai'"
              value="展开"
              title="简介"
              name="1"
              >{{ content[1] }}</van-collapse-item
            >
          </van-collapse>
        </div>

        <div class="celebrities">
          <div class="ctitle">演员人员</div>
          <div class="cren">
            <div class="cbox" v-for="(item, index) in celebrities" :key="index">
              <div class="cimg">
                <img class="auto-img aimg" :src="avatar[index]" alt="" />
              </div>
              <div class="cnm one-text">{{ item.cnm }}</div>
              <div class="cdao one-text">{{ item.desc }}</div>
            </div>
          </div>
        </div>

        <div class="photos">
          <van-tabs
            v-model="active"
            color="#fff"
            :background="movie.backgroundColor"
            title-active-color="#fff"
            title-inactive-color="#ddd"
          >
            <van-tab title="视频">
              <div class="vbox">
                <div
                  class="boxv"
                  v-for="(item, index) in feed"
                  :key="index"
                  @click="
                    goAdeio(video[index].url, item.title, item.onlineTime)
                  "
                >
                  <div class="vimg">
                    <img class="auto-img" :src="video[index].imgUrl" alt="" />
                  </div>
                  <div class="vtitle one-text">
                    {{ item.title }}
                  </div>
                  <div class="vplay">
                    <van-icon color="#ddd" size="20" name="play-circle" />
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="剧照">
              <div class="pbox">
                <div class="pimg" v-for="(item, index) in photos" :key="index">
                  <img class="auto-img imgp" :src="item" alt="" />
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="ping">
        <div class="pl">
          <div class="pjtitle">观众热评：</div>

          <div class="pjbox">
            <div
              class="yhbox"
              v-for="(item, index) in hotComments"
              :key="index"
              v-show="isHas"
            >
              <div class="yhtou">
                <div class="yhimg">
                  <img class="auto-img" :src="item.avatarUrl" alt="" />
                </div>
              </div>
              <div class="yhtbox">
                <div class="yhtitbox">
                  <div class="yhnm">{{ item.nick }}</div>
                  <div class="lv">Lv{{ item.userLevel }}</div>
                </div>
                <div class="xxbox">
                  <div class="xx">
                    <van-rate
                      disabled-color="#faaf00"
                      size="12"
                      gutter="2"
                      v-model="value[index]"
                      disabled
                    />
                  </div>
                  <div class="xxfen">{{ Math.floor(value[index] * 2) }}分</div>
                  <div class="gicon">
                    <img class="auto-img" src="../assets/goupiao.png" alt="" />
                  </div>
                </div>
                <div class="yhpl">
                  {{ item.content }}
                </div>
                <div class="yhtimbox">
                  <div class="yhtime">{{ time[index] }}</div>
                  <div class="yhzan">
                    <van-icon name="like-o" />{{ item.upCount }}
                  </div>
                </div>
              </div>
            </div>
            <div v-show="!isHas">
              <van-empty description="暂无该影片的评论信息！" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="shopbox" v-show="type">
      <div class="shopbtn">
        <van-button
          @click="goShop(id)"
          round
          color="#FA2900"
          type="primary"
          size="large"
          >特惠购票</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";

export default {
  name: "Details",
  components: {
    Navi,
  },
  data() {
    return {
      movie: [],
      content: "",
      celebrities: [],
      distributions: [],
      avatar: [],
      sc: "",
      id: "",
      feed: [],
      video: [],
      photos: [],
      active: 0,
      type: "",
      isHas: true,

      xuan: ["全部", "最新", "好评", "差评"],

      //星星数量
      value5: 5,
      value4: 4,
      value3: 3,
      value2: 2,
      value1: 1,
      value: [4, 5, 3, 2, 1, 2, 3, 4, 5, 4],

      activeNames: ["1"],

      hotComments: [],
      time: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.type = this.$route.params.type;

    this.$nextTick(function () {
      this.type = this.$route.params.type;
    });

    this.getDetails(this.id);
  },
  methods: {
    getDetails(id) {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/movie/detail?movieId=" + id,
      })
        .then((result) => {
          this.$toast("加载成功！");

          this.movie = result.data.movie;

          this.sc = this.movie.sc.toFixed(1);
          this.content = this.movie.shareInfo.content.split("|");
          this.celebrities = result.data.celebrities;

          //处理星星点评分数
          this.movie.distributions.forEach((v) => {
            if (v.proportion === "--") {
              return;
            } else {
              this.distributions.push(v.proportion);
            }
          });
          if (this.distributions.length === 0) {
            this.distributions.push("0", "0", "0", "0", "0");
          } else {
            this.distributions.push("19.5", "4.6");
          }

          //处理演员图片显示问题
          this.celebrities.forEach((v) => {
            this.avatar.push(v.avatar.replaceAll("w.h", "170.230"));
          });

          let photos = this.movie.photos;
          photos.forEach((v) => {
            this.photos.push(v.replaceAll("w.h", "170.230"));
          });
          //

          if (result.data.feedVideos === undefined) {
            this.feed = [];
          } else {
            this.feed = result.data.feedVideos.feeds;
            this.feed.forEach((v) => {
              this.video.push(v.video);
            });
          }

          //处理评论

          if (result.data.comments.hotComments.length === 0) {
            this.isHas = false;
          } else {
            this.isHas = true;
          }

          this.hotComments = result.data.comments.hotComments;

          this.hotComments.forEach((v) => {
            let time = v.startTime;
            this.time.push(
              new Date(parseInt(time))
                .toLocaleString()
                .replace(/:\d{1,2}$/, " ")
                .slice(0, 9)
                .replace(/\s*/g, "")
            );
          });
        })
        .catch((err) => {});
    },
    goAdeio(url, title, time) {
      this.$router.push({ name: "Adeio", params: { url, title, time } });
    },
    goShop(id) {
      this.$router.push({ name: "Shop", params: { id } });
    },
    like() {
      let like = document.getElementsByClassName("like");

      let loc = JSON.parse(localStorage.getItem("token") || "[]");

      if (loc.length === 0) {
        this.$toast("请先登录,跳转中...");
        setTimeout(() => {
          this.$router.push({ name: "Login" });
        }, 2000);
        return;
      } else {
        if (like[0].childNodes[0].className.split(" ")[1] == "van-icon-like") {
          like[0].childNodes[0].classList.add("van-icon-like-o");
          like[0].childNodes[0].classList.remove("van-icon-like");
          localStorage.removeItem("data2");
          this.$toast("已取消想看");
        } else {
          like[0].childNodes[0].classList.add("van-icon-like");
          like[0].childNodes[0].classList.remove("van-icon-like-o");

          // //获取本地存储的聊天记录
          let localData = localStorage.getItem("data2");

          if (!localData) {
            localData = [];
          } else {
            localData = JSON.parse(localData);
          }
          let addList = {
            movie: this.movie,
          };
          localData.push(addList);
          localStorage.setItem("data2", JSON.stringify(localData));
          this.$toast("已加入想看");
        }
      }
    },
    star() {
      let star = document.getElementsByClassName("star");

      let loc = JSON.parse(localStorage.getItem("token") || "[]");
      

      if (loc.length === 0) {
        this.$toast("请先登录,跳转中...");
        setTimeout(() => {
          this.$router.push({ name: "Login" });
        }, 2000);
        return;
      } else {
        // //获取本地存储的聊天记录
        let localData = localStorage.getItem("data3");
        // let locv = JSON.parse(localStorage.getItem("data3") || "[]");
        if (star[0].childNodes[0].className.split(" ")[1] == "van-icon-star") {
          star[0].childNodes[0].classList.add("van-icon-star-o");
          star[0].childNodes[0].classList.remove("van-icon-star");
          // console.log(locv);
          // for(let i = 0;i<locv.length;i++){
          //   console.log(locv[i].movie.id);
          //   if(locv[locv.length-1].movie.id === locv[i].movie.id){
          //     console.log(locv[i]);

          //     // localStorage.removeItem("data3");
          //   }
          // }

          localStorage.removeItem("data3");
          this.$toast("已取消看过");
        } else {
          star[0].childNodes[0].classList.add("van-icon-star");
          star[0].childNodes[0].classList.remove("van-icon-star-o");

          if (!localData) {
            localData = [];
          } else {
            localData = JSON.parse(localData);
          }
          let addList = {
            movie: this.movie,
          };
          localData.push(addList);
          localStorage.setItem("data3", JSON.stringify(localData));
          this.$toast("已加入看过");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tab__text {
  font-size: 18px;
}

/deep/.van-tab {
  -webkit-flex: 0;
  flex: none;
  padding: 0 10px;
}

/deep/.van-collapse {
  position: static;
}
/deep/.van-cell::after {
  position: static;
  border: 0;
}
/deep/.van-cell {
  background-color: rgba(255, 255, 255, 0);
  position: static;
  padding: 10px 0;
}
/deep/[class*="van-hairline"]::after {
  border: 0;
}

/deep/.van-collapse-item__content {
  padding: 0 0 20px 0;
}

/deep/.van-collapse-item__content {
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
  font-size: 16px;
}

.shopbox {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  .shopbtn {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
  }
}
.box {
  padding-bottom: 60px;
}

.nav {
  // background-color: #19402c;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  /deep/.bai {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  .tbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .timg {
      width: 105px;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      .himg {
        height: 160px;
      }
      .play {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        bottom: 12px;
      }
    }
    .nmbox {
      width: 230px;
      .nm {
        font-size: 23px;
        margin-bottom: 5px;
        color: #fff;
      }
      .enm {
        font-size: 13px;
        margin-bottom: 15px;
        color: #ddd;
      }
      .cat {
        font-size: 13px;
        margin-bottom: 5px;
        color: #ddd;
      }
      .desc {
        font-size: 13px;
        margin-bottom: 15px;
        color: #ddd;
      }
    }
    .btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      .like,
      .star {
        width: 100px;
        height: 30px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 14px;
      }
    }
  }
  .scbox {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 20px 0 0 0;
    .tsc {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .sctitle {
        width: 40%;
        display: flex;
        .scimg {
          width: 25px;
          height: 25px;
        }
        .sctext {
          color: #e8e8e8;
          font-size: 13px;
          line-height: 25px;
          margin-left: 5px;
        }
      }
      .sum {
        font-size: 12px;
        color: #ddd;
        line-height: 25px;
      }
    }
    .fbox {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      .fenbox {
        width: 20%;
        text-align: right;

        .fen {
          font-size: 30px;
          color: #faaf00;
          font-weight: bold;
        }
        .fren {
          font-size: 12px;
          color: #e9e9e9;
        }
      }
      .xbox {
        width: 35%;
        display: flex;
        justify-content: space-between;
        .xing {
          width: 35%;
          height: auto;
          margin-top: 5px;
          margin-left: 5px;
          .xx {
            display: flex;
            .x {
              width: 8px;
              height: 8px;
            }
          }
        }
        .tiao {
          width: 58%;
          margin-top: 6px;
          .content {
            margin-bottom: 5px;
          }
        }
      }
    }
  }

  .celebrities {
    width: 100%;
    .ctitle {
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    .cren {
      width: 100%;
      display: flex;
      margin-top: 10px;
      overflow: scroll;
      .cbox {
        width: 85px;
        margin-right: 6px;
        .cimg {
          width: 85px;

          border-radius: 10px;
          overflow: hidden;
        }
        .aimg {
          height: 117px;
        }
        .cnm {
          color: #fff;
          font-size: 14px;
          text-align: center;
          margin: 15px 0 5px 0;
        }
        .cdao {
          color: #999;
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }

  .photos {
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .vbox {
      width: 100%;
      display: flex;
      overflow: scroll;
      margin-top: 5px;
      .boxv {
        width: 100%;
        margin-right: 7px;
        position: relative;
        .vimg {
          width: 150px;
          border-radius: 10px;
          overflow: hidden;
        }
        .vtitle {
          color: #fff;
          width: 140px;
          text-align: center;
          position: absolute;
          bottom: 3px;
          left: 3px;
        }
        .vplay {
          position: absolute;
          top: 30px;
          left: 65px;
        }
      }
      .boxv:last-child {
        margin-right: 0;
      }
    }
    .pbox {
      width: 100%;
      display: flex;
      overflow-x: scroll;
      position: relative;
      .pimg {
        width: 100px;
        margin-right: 7px;
        margin-top: 5px;
        .imgp {
          width: 100px;
          height: 125px;
        }
      }
      .pimg:last-child {
        margin-right: 0;
      }
    }
  }
}
.ping {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  .pl {
    width: 100%;
    background-color: #fff;
    .pjtitle {
      width: 100%;
      height: 25px;
      line-height: 25px;
      font-size: 18px;
      margin-bottom: 15px;
    }
    .pjbox {
      width: 100%;
      .yhbox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 10px;
        .yhtou {
          width: 17%;
          .yhimg {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin-left: 20px;
          }
        }
        .yhtbox {
          width: 80%;

          .yhtitbox {
            width: 100%;
            display: flex;
            .yhnm {
              font-size: 15px;
              color: #666;
              line-height: 25px;
            }
            .lv {
              font-size: 13px;
              color: #faaf00;
              line-height: 25px;
              margin-left: 5px;
            }
          }
          .xxbox {
            width: 100%;
            display: flex;
            line-height: 20px;
            .xxfen {
              font-size: 12px;
              color: #faaf00;
              margin-left: 3px;
            }
            .gicon {
              width: 35px;
            }
          }
          .yhpl {
            width: 100%;
            font-size: 14px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            overflow: hidden;
          }
          .yhtimbox {
            width: 100%;
            display: flex;
            justify-content: space-between;
            color: #ddd;
            font-size: 12px;
            margin-top: 15px;
            .yhtime {
              line-height: 26px;
            }
            .yhzan {
              border-radius: 20px;
              border: 1px solid #ddd;
              padding: 2px 4px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>